<template>
  <div class="move-file">
    <el-dialog
      title="移动"
      :visible.sync="dialogVisible"
      width="700px"
      @close="resetForm()"
    >
      <div style="min-height: 20vh">
        <el-tree
          ref="tree2"
          v-if="dialogVisible"
          :props="props"
          :load="loadNode"
          node-key="id"
          @check="handleClick"
          :check-strictly="true"
          lazy
          :default-expanded-keys="[0]"
          show-checkbox
        >
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dialogVisible: false,
      currentFile: {},
      resolve: '',
      props: {
        label: 'oldName',
        children: 'childList',
        isLeaf: 'laef',
      },
      listQuery: {
        king: 4, //1.我的网盘，2.全部网盘 3.我的回收站 4.移动时选择目录
        category: 1,
        del: 1,
        page: 1,
        limit: 1000,
        pId: 0,
        isFolder: 1,
        selectPId: '0',
      },
      tableData: [{ oldName: '全部', pid: 0, id: 0, childList: [] }],
      checkedId: '',
      type: 1,
    }
  },
  computed: mapGetters(['netCheckedFile']),
  mounted() {
    this.$bus.$on('moveFile', (v) => {
      if (v) {
        this.currentFile = v
      }
      this.type = v ? 1 : 2
      this.dialogVisible = true
    })
  },
  beforeDestroy() {
    this.$bus.$off('moveFile')
  },
  methods: {
    async loadNode(node, resolve) {
      let { id, isFolder } = this.currentFile
      if (node.level === 0) {
        return resolve(this.tableData)
      }
      if (node.level === 1 && this.type == 1) {
        this.listQuery.selectPId = id
        this.listQuery.isFolder = isFolder
      } else if (node.level >= 2) {
        let { id, pid } = node.data
        this.listQuery.selectPId = pid == 0 ? id : pid
        this.listQuery.pId = id
        if (this.type == 1) {
          this.listQuery.isFolder = isFolder
        }
      }
      if (isFolder == 1) {
        this.listQuery.selectPId = id
      }
      this.listQuery.isFolder = 1
      let res = await this.$store.dispatch('queryTbNetDisk', this.listQuery)
      if (this.type == 2) {
        let ids = this.netCheckedFile.map((v) => v.id)
        res.data = res.data.filter((item) => {
          return !ids.includes(item.id)
        })
      }
      res.data.forEach((v) => {
        v.laef = v.isChild == 2
      })
      resolve(res.data)
    },
    handleClick(node) {
      this.checkedId = node.id
      this.$refs.tree2.setCheckedKeys([this.checkedId])
    },
    //提交
    submitForm() {
      if (this.checkedId == '' && this.checkedId !== 0) {
        this.warnMsg('请选择文件夹')
        return
      }
      this.handleMove()
    },
    //移动|批量移动
    async handleMove() {
      let data = []
      if (this.type == 1) {
        data.push({
          id: this.currentFile.id,
          pid: this.checkedId,
          category: 1,
        })
      } else {
        this.netCheckedFile.forEach((item) => {
          data.push({
            id: item.id,
            pid: this.checkedId,
            category: 1,
          })
        })
      }
      await this.$store.dispatch('batchMoveNewTbNetDisk', data)
      this.$bus.$emit('refreshTbNetDiskList')
      this.dialogVisible = false
    },
    resetForm() {
      this.listQuery.pId = '0'
      this.listQuery.isFolder = 1
      this.listQuery.selectPId = '0'
    },
  },
}
</script>